<!-- 个人中心 -->
<template>
  <div class="mine-box" @click="goToAccount">
    <div class="mine-box-left">
      <div><img :src="this.$store.state.HeadPortrait" alt=""></div>
    </div>
    <div class="mine-box-center">
      <h5>{{user_id}}</h5>
    </div>
    <div class="mine-box-right">
      <div>></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_id:''
    };
  },
  methods: {
    goToAccount() {
      
      console.log("上传照片");
    }
  },
  created(){
    this.user_id = window.localStorage.getItem("user_id");
  
  }
};
</script>
<style lang='scss' scoped>
.mine-box {
  width: 100%;
  height: 4.0541rem;
   background-color: rgba($color:rgb(25, 137, 250), $alpha: 0.3);
  display: flex;
  align-items: center;
  .mine-box-left {
    flex: 2;
    display: flex;
    justify-content: center;
    div {
      width: 1.7297rem;
      height: 1.7297rem;
      border-radius: 50%;
      margin-left: 0.9459rem;
      img{
        width: 100%;
      }
    }
  }
  .mine-box-center {
    flex: 3;
  }
  .mine-box-right {
    flex: 1;
    div {
      margin-left: 0.9459rem;
    }
  }
}
</style>